<template>
  <div class="q-px-sm q-py-lg">
    <t-fab
      :fabDraggable="true"
      active-icon="add"
      color="primary"
      icon="keyboard_arrow_right"
      direction="right"
      :staticItems="obj"
      @fabItemsClick="fabItemsClick"
      dragTop="90%"
      dragLeft="90%"
    >
    </t-fab>
  </div>
</template>

<script>
  import { reactive } from 'vue';
  export default {
    setup() {
      const obj = reactive([
        { label: 'mail', icon: 'mail', color: 'warning' },
        { label: 'alarm', icon: 'alarm', color: 'red' },
      ]);
      return {
        obj,
        onClick() {
          console.log('Clicked on a fab action');
        },
        fabItemsClick(data) {
          console.log(data);
        },
        show() {
          console.log(1);
        },
      };
    },
  };
</script>
